
<!DOCTYPE html>
<html lang="zh-Hans" class="loading">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>react开发环境搭建 - 默默默默燃</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="google" content="notranslate" />
    <meta name="keywords" content="TriDiamond Obsidian,"> 
    <meta name="description" content="一枚前端搬砖队队员的记录册,使用creat-react-app搭建基于webpack的react开发环境
facebook官方文档Quick Start:
1234567891011npm install -g create-,"> 
    <meta name="author" content="张白告丶"> 
    <link rel="alternative" href="atom.xml" title="默默默默燃" type="application/atom+xml"> 
    <link rel="icon" href="/img/favicon.png"> 
    <link href="https://fonts.loli.net/css?family=Roboto+Mono|Rubik&display=swap" rel="stylesheet">
    
<link rel="stylesheet" href="//at.alicdn.com/t/font_1429596_nzgqgvnmkjb.css">

    
<link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.7.2/animate.min.css">

    
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css">

    
<link rel="stylesheet" href="//cdn.bootcss.com/codemirror/5.48.4/codemirror.min.css">

    
<link rel="stylesheet" href="//cdn.bootcss.com/codemirror/5.48.4/theme/dracula.css">

    
<link rel="stylesheet" href="/css/obsidian.css">

    
<link rel="stylesheet" href="/css/ball-atom.min.css">

<meta name="generator" content="Hexo 4.2.0"></head>


<body class="loading">
    <div class="loader">
        <div class="la-ball-atom la-2x">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <span id="config-title" style="display:none">默默默默燃</span>
    <div id="loader"></div>
    <div id="single">
    <div class="scrollbar gradient-bg-rev"></div>
<div id="top" style="display: block;">
    <div class="bar" style="width: 0;"></div>
    <div class="navigation animated fadeIn fast delay-1s">
        <img id="home-icon" class="icon-home" src="/img/favicon.png" alt="" data-url="https://zhanghao-web.github.io">
        <div id="play-icon" title="Play/Pause" class="iconfont icon-play"></div>
        <h3 class="subtitle">react开发环境搭建</h3>
        <div class="social">
            <!--        <div class="like-icon">-->
            <!--            <a href="javascript:;" class="likeThis active"><span class="icon-like"></span><span class="count">76</span></a>-->
            <!--        </div>-->
            <div>
                <div class="share">
                    
                        <a href="javascript:;" class="iconfont icon-share1"></a>
                        <div class="share-component-cc" data-disabled="facebook,douban,linkedin,diandian,tencent,google"></div>
                    
                </div>
            </div>
        </div>
    </div>
</div>

    <div class="section">
        <div class=article-header-wrapper>
    <div class="article-header">
        <div class="article-cover animated fadeIn" style="
            animation-delay: 600ms;
            animation-duration: 1.2s;
            background-image: 
                radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.65), #100e17),
                url(/img/cover.jpg) ">
        </div>
        <div class="else">
            <p class="animated fadeInDown">
                
                <a href="/categories/React"><b>「
                    </b>REACT<b> 」</b></a>
                
                February 28, 2018
            </p>
            <h3 class="post-title animated fadeInDown"><a href="/2018/02/28/React/react%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/" title="react开发环境搭建" class="">react开发环境搭建</a>
            </h3>
            
            <p class="post-count animated fadeInDown">
                
                <span>
                    <b class="iconfont icon-text2"></b> <i>Words count</i>
                    19k
                </span>
                
                
                <span>
                    <b class="iconfont icon-timer__s"></b> <i>Reading time</i>
                    17 mins.
                </span>
                
                
                
                <span id="busuanzi_container_page_pv">
                    <b class="iconfont icon-read"></b> <i>Read count</i>
                    <span id="busuanzi_value_page_pv">0</span>
                </span>
                
            </p>
            
            
            <ul class="animated fadeInDown post-tags-list" itemprop="keywords"><li class="animated fadeInDown post-tags-list-item"><a class="animated fadeInDown post-tags-list-link" href="/tags/React/" rel="tag">React</a></li></ul>
            
        </div>
    </div>
</div>

<div class="screen-gradient-after">
    <div class="screen-gradient-content">
        <div class="screen-gradient-content-inside">
            <div class="bold-underline-links screen-gradient-sponsor">
                <p>
                    <span class="animated fadeIn delay-1s"></span>
                </p>
            </div>
        </div>
    </div>
</div>

<div class="article">
    <div class='main'>
        <div class="content markdown animated fadeIn">
            <h1 id="使用creat-react-app搭建基于webpack的react开发环境"><a href="#使用creat-react-app搭建基于webpack的react开发环境" class="headerlink" title="使用creat-react-app搭建基于webpack的react开发环境"></a>使用creat-react-app搭建基于webpack的react开发环境</h1><hr>
<p><a href="https://github.com/facebook/create-react-app" target="_blank" rel="noopener">facebook官方文档</a><br><strong>Quick Start</strong>:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">npm install -g create-react-app       <span class="comment">//安装create-react-app，yarn命令(需要安装yarn) yarn add create-react-app</span></span><br><span class="line"></span><br><span class="line">create-react-app myapp  <span class="comment">//使用命令创建react应用 myapp为文件名称</span></span><br><span class="line"></span><br><span class="line">cd myapp     <span class="comment">//进入文件目录</span></span><br><span class="line"></span><br><span class="line">npm start <span class="comment">//yarn start  启动应用</span></span><br><span class="line"></span><br><span class="line">npm test or yarn test <span class="comment">//测试</span></span><br><span class="line"></span><br><span class="line">npm run build or yarn build <span class="comment">//打包编译</span></span><br></pre></td></tr></table></figure>
<p>上述命令即可快速创建react开发环境</p>
<p>打开<a href="http://localhost:3000/" target="_blank" rel="noopener">http://localhost:3000/</a> 查看<br><a id="more"></a></p>
<h2 id="环境配置介绍："><a href="#环境配置介绍：" class="headerlink" title="环境配置介绍："></a>环境配置介绍：</h2><h3 id="项目结构："><a href="#项目结构：" class="headerlink" title="项目结构："></a>项目结构：</h3><p>生成项目后，脚手架为了“优雅”… …隐藏了所有的webpack相关的配置文件，此时查看myapp文件夹目录，会发现找不到任何webpack配置文件。执行以下命令：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run eject</span><br></pre></td></tr></table></figure></p>
<p>再查看myapp 文件夹，可以看到完整的项目结构：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">myapp/</span><br><span class="line">    node_modules/</span><br><span class="line">    package.json</span><br><span class="line">    .gitignore</span><br><span class="line">    config/</span><br><span class="line">        paths.js</span><br><span class="line">        polyfills</span><br><span class="line">        env.js</span><br><span class="line">        webpack.config.dev.js</span><br><span class="line">        webpack.config.prod.js</span><br><span class="line">    public/</span><br><span class="line">        index.html   / 入口html文件 /</span><br><span class="line">    scripts</span><br><span class="line">        **build.js**</span><br><span class="line">        **start.js**</span><br><span class="line">        test.js</span><br><span class="line">    src/</span><br><span class="line">        App.js</span><br><span class="line">        index.js    / 主入口文件 /</span><br></pre></td></tr></table></figure><br>加粗文件为主要配置文件。</p>
<p>二、项目配置介绍<br>此处需要有npm、webpack的基础知识，充电传送门：<a href="http://www.jianshu.com/p/42e11515c10f" target="_blank" rel="noopener">webpack学习教程</a></p>
<p>查看package.json文件的scripts，<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"scripts"</span>: &#123;</span><br><span class="line"></span><br><span class="line">    <span class="string">"start"</span>: <span class="string">"node scripts/start.js"</span>,</span><br><span class="line"></span><br><span class="line">    <span class="string">"build"</span>: <span class="string">"node scripts/build.js"</span>,</span><br><span class="line"></span><br><span class="line">    <span class="string">"test"</span>: <span class="string">"node scripts/test.js --env=jsdom"</span></span><br><span class="line"></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure></p>
<p>可知，运行时是直接执行scripts文件目录下的js文件。<br>其中<strong>start.js</strong>为开发环境，<strong>build.js</strong>为打包脚本。</p>
<h3 id="开发环境，代理请求"><a href="#开发环境，代理请求" class="headerlink" title="开发环境，代理请求"></a>开发环境，代理请求</h3><p>查看<strong>start.js</strong>, Facebook基本为每项配置都写了详尽的注释，<br><strong>start.js</strong>脚本启动了dev-server, 这里需要了解的是</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addMiddleware</span>(<span class="params">devServer</span>)</span>&#123;</span><br><span class="line">    ... ...</span><br><span class="line">    这个函数调用http-proxy-middleware模块，将代理请求，代理地址在package.json中添加</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>在package.json中添加字段proxy，开发环境下dev-server将会自动转发请求：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"proxy"</span>: <span class="string">"http://aaa.bbb.com"</span></span><br></pre></td></tr></table></figure></p>
<h3 id="SASS、LESS等CSS预处理器配置"><a href="#SASS、LESS等CSS预处理器配置" class="headerlink" title="SASS、LESS等CSS预处理器配置"></a>SASS、LESS等CSS预处理器配置</h3><p>Facebook官方在create-react-app升级到某一版本，突然丢掉了默认对sass、less等预处理器的支持，官方文档说明</p>
<p>于是，只能自己动手，在config目录下，<strong>webpack.config.dev.js</strong> 和 <strong>webpack.config.prod.js</strong>文件，没有抽出 loader、postcss之类一般共用的配置，于是，在两个文件夹都要一起配置，也可以抽出共用部分，以便维护。</p>
<p>这里以<strong>webpack.config.dev.js</strong>举例，<strong>webpack.config.prod.js</strong>一样配置即可：</p>
<p>SASS-loader：<br>1、命令行，在当前目录执行：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save node-sass-chokidar <span class="comment">//or yarn add node-sass-chokidar</span></span><br></pre></td></tr></table></figure><br>然后在package.json修改为<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"scripts"</span>: &#123;</span><br><span class="line">   <span class="string">"build-css"</span>: <span class="string">"node-sass-chokidar src/ -o src/"</span>,</span><br><span class="line">   <span class="string">"watch-css"</span>: <span class="string">"npm run build-css &amp;&amp; node-sass-chokidar src/ -o src/ --watch --recursive"</span>,</span><br><span class="line">     <span class="string">"start"</span>: <span class="string">"react-scripts start"</span>,</span><br><span class="line">     <span class="string">"build"</span>: <span class="string">"react-scripts build"</span>,</span><br><span class="line">     <span class="string">"test"</span>: <span class="string">"react-scripts test --env=jsdom"</span>,</span><br></pre></td></tr></table></figure><br>把index.css改为index.scss 执行<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run watch-css</span><br></pre></td></tr></table></figure><br>就可以发现sass文件被编译成了css文件（自动生成的css文件所以引用的部分不作修改）</p>
<p>如果你发现在执行<strong>watch-css</strong> 命令时 不能同时执行npm start,可以采用另外一种方式：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save npm-run-all <span class="comment">//yarn add npm-run-all（ 这是watch-css和build-css的合集）</span></span><br></pre></td></tr></table></figure><br>同样修改package.json中的<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"scripts"</span>: &#123;</span><br><span class="line">   <span class="string">"build-css"</span>: <span class="string">"node-sass-chokidar src/ -o src/"</span>,</span><br><span class="line">   <span class="string">"watch-css"</span>: <span class="string">"npm run build-css &amp;&amp; node-sass-chokidar src/ -o src/ --watch --recursive"</span>,</span><br><span class="line">   <span class="string">"start-js"</span>: <span class="string">"node scripts/start.js"</span>,</span><br><span class="line">   <span class="string">"start"</span>: <span class="string">"npm-run-all -p watch-css start-js"</span>,</span><br><span class="line">   <span class="string">"build-js"</span>: <span class="string">"node scripts/build.js"</span>,</span><br><span class="line">   <span class="string">"build"</span>: <span class="string">"npm-run-all build-css build-js"</span>,</span><br><span class="line">   <span class="string">"test"</span>: <span class="string">"node scripts/test.js --env=jsdom"</span></span><br><span class="line"> &#125;,</span><br></pre></td></tr></table></figure><br>这样就可以只需执行npm start 编辑查看了</p>
<p>2、找到webpack.config.dev.js文件中 loaders中的第一项exclude（值为数组），排除scss文件，否则将被’url-loader’捕获。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line"></span><br><span class="line">exclude: [</span><br><span class="line">    /\.html$/,</span><br><span class="line">    /\.(js|jsx)(\?.*)?$/,</span><br><span class="line">    /\.css$/,</span><br><span class="line">    /\.json$/,</span><br><span class="line">    /\.svg$/,</span><br><span class="line">    /\.scss$/     <span class="comment">//....新增项!</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure></p>
<p>3、loaders新增一项：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    test: <span class="regexp">/\.scss$/</span>,</span><br><span class="line">    loader: <span class="string">'style!css!postcss!sass?outputStyle=expanded'</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure></p>
<p>至此，SASS文件就可以正常打包了（此处针对SCSS文件，如用到SASS，可将SCSS的正则修改下），LESS文件类似，不再赘述。</p>
<h2 id="使用and-mobile-UI工具-可以快速开发react应用"><a href="#使用and-mobile-UI工具-可以快速开发react应用" class="headerlink" title="使用and-mobile UI工具 可以快速开发react应用"></a>使用and-mobile UI工具 可以快速开发react应用</h2><p><a href="https://mobile.ant.design/index-cn" target="_blank" rel="noopener">and-mobile入口</a></p>
<h3 id="antd-mobile的引入及配置"><a href="#antd-mobile的引入及配置" class="headerlink" title="antd-mobile的引入及配置"></a>antd-mobile的引入及配置</h3><p>在命令行执行：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install antd-mobile --save</span><br></pre></td></tr></table></figure></p>
<p><strong>按需引入</strong></p>
<p>为减少打包后体积以及方便书写，可用babel-plugin-import插件，配置后引入模块可如下：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;Picker&#125; <span class="keyword">from</span> <span class="string">'antd-mobile'</span>;</span><br></pre></td></tr></table></figure><br>自动引入CSS和JS，无需再引入整个antd-mobile的整个CSS文件</p>
<p>使用如下：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install babel-plugin-<span class="keyword">import</span> --save-dev</span><br></pre></td></tr></table></figure></p>
<p>安装完毕后，在根目录新建文件，命名: .babelrc.js<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="string">"presets"</span>: [</span><br><span class="line">    <span class="string">"es2015"</span>,</span><br><span class="line">    <span class="string">"react"</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="string">"plugins"</span>: [</span><br><span class="line">    [</span><br><span class="line">      <span class="string">"import"</span>,</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="string">"libraryName"</span>: <span class="string">"antd-mobile"</span>,</span><br><span class="line">          <span class="string">"style"</span>: <span class="string">"css"</span></span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>在文件内输入以上内容，为babel的配置。</p>
<p>然后！！！最重要的一步，<strong>把package.json中的babel配置给删掉，尤其是：react-app！！！</strong></p>
<p>webpack.config.dev.js和webpack.config.prod.js中，都需要为resolve的extensions新增一项’<strong>.web.js</strong>‘</p>
<p>antd-mobile的web版的文件后缀为.web.js …</p>
<h2 id="基于create-react-app的打包后文件根路径修改"><a href="#基于create-react-app的打包后文件根路径修改" class="headerlink" title="基于create-react-app的打包后文件根路径修改"></a>基于create-react-app的打包后文件根路径修改</h2><p>找到react-script模块文件夹config下面  paths.js 或<br>node_modules\react-scripts\config\ paths.js<br>45行到 49行<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getServedPath</span>(<span class="params">appPackageJson</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> publicUrl = getPublicUrl(appPackageJson);</span><br><span class="line">  <span class="keyword">const</span> servedUrl =</span><br><span class="line">    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : <span class="string">'./'</span>); <span class="comment">// 配置文件跟路径'/'前面加.</span></span><br><span class="line">  <span class="keyword">return</span> ensureSlash(servedUrl, <span class="literal">true</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h2 id="react段位排行要求知乎大神总结"><a href="#react段位排行要求知乎大神总结" class="headerlink" title="react段位排行要求知乎大神总结"></a>react段位排行要求<a href="https://www.zhihu.com/people/mo-ran-biao-82/activities" target="_blank" rel="noopener">知乎大神总结</a></h2><h3 id="倔强青铜"><a href="#倔强青铜" class="headerlink" title="倔强青铜"></a>倔强青铜</h3><p>初入峡谷的初始段位，默认召唤师已经有了ES6，nodejs的基础使用create-react-app建立React开发环境学习React世界里的基本玩法，例如组件化，JSX，事件监听，内部state，组件的props、生命周期函数等这篇文章主要介绍React青铜升白银需要的基础知识，看完你就白银啦</p>
<h3 id="秩序白银"><a href="#秩序白银" class="headerlink" title="秩序白银"></a>秩序白银</h3><p>到了白银段位，基本都是有了基本的操作，不会出现呆萌的站在地方塔下被打死的情况了我们需要买一个皮肤来提升页面美观并且多加练习学习使用蚂蚁金服ant-design的使用</p>
<h3 id="荣耀黄金"><a href="#荣耀黄金" class="headerlink" title="荣耀黄金"></a>荣耀黄金</h3><p>到了这个阶段，召唤师对React有了基本的认识，想进一步的提升段位，我们需要提高自己的大局观学习使用React-Router4来让我们有多面作战能力学会使用BrowserRouter，Router，Link等组件学会使用Redux和队友配合，修炼大局观了解单项数据流开发模式和Redux的各种概念,如dispatch,action,reducers使用react-redux更好的和Redux配合有大局观意识，上铂金也是很 easy 了</p>
<h3 id="尊贵铂金"><a href="#尊贵铂金" class="headerlink" title="尊贵铂金"></a>尊贵铂金</h3><p>很多召唤师卡在铂金上不去，因为铂金想上钻石，需要了解更多的细节和原理React原理剖析对自己技能的原理有深刻的了解，上钻石必备</p>
<h3 id="永恒钻石"><a href="#永恒钻石" class="headerlink" title="永恒钻石"></a>永恒钻石</h3><p>钻石段位开始了征兆模式，召唤师的技能池要足够深才能更进一步，对自己擅长技能的理解也要更深刻Redux中间件机制，实现自己的中间件常见的React 性能优化方式服务端渲染Redux之外其他的数据解决方案如mobx，dva</p>
<h3 id="至尊星耀"><a href="#至尊星耀" class="headerlink" title="至尊星耀"></a>至尊星耀</h3><p>这个段位已经是独当一面的强者了，目标仅限于 React 这个库很难更近一层，需要了解更底层的原理Redux原理剖析+实现自己的ReduxReact-Router+实现自己的React-RouterWebppack工作机制和原理剖析Babel工作机制和原理剖析</p>
<h3 id="最强王者"><a href="#最强王者" class="headerlink" title="最强王者"></a>最强王者</h3><p>达到最强王者已经是顶尖召唤师，在整个 React 峡谷都是鼎鼎大名的存在，听说上面还有传说中的<strong>荣耀王者</strong>的段位，我这辈子是达不到了，也没法教你们了，囧这个阶段，我只推荐《程序员健康指南》一本书，保持身心健康，成为荣耀王者是早晚的事<br><a href="https://www.jianshu.com/p/5e6c620ff4d6" target="_blank" rel="noopener">原文链接</a></p>

            <!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
            <audio id="audio" loop="1" preload="auto" controls="controls"
                data-autoplay="false">
                <source type="audio/mpeg" src="">
            </audio>
            
            <ul id="audio-list" style="display:none">
                
                
                <li title='0' data-url='/statics/chengdu.mp3'></li>
                
                    
            </ul>
            
            
            
    <div id='gitalk-container' class="comment link"
        data-ae='true'
        data-ci='ec894e2b66f752e8b7fb'
        data-cs='3ccc2e92bb350688fe2c2dc2930189b62622bfb1'
        data-r='blog-comments'
        data-o='TriDiamond'
        data-a='TriDiamond'
        data-d='undefined'
    >Comments</div>


            
            
        </div>
        <div class="sidebar">
            <div class="box animated fadeInRight">
                <div class="subbox">
                    <img src="https://res.cloudinary.com/tridiamond/image/upload/v1573019751/TriDiamond_logo_ui_xeublz.jpg" height=300 width=300></img>
                    <p>张白告丶</p>
                    <span>Think like an artist, develop like an artisan</span>
                    <dl>
                        <dd><a href="https://github.com/zhanghao-web" target="_blank"><span
                                    class=" iconfont icon-github"></span></a></dd>
                        <dd><a href="" target="_blank"><span
                                    class=" iconfont icon-twitter"></span></a></dd>
                        <dd><a href="" target="_blank"><span
                                    class=" iconfont icon-stack-overflow"></span></a></dd>
                    </dl>
                </div>
                <ul>
                    <li><a href="/">149 <p>Articles</p></a></li>
                    <li><a href="/categories">23 <p>Categories</p></a></li>
                    <li><a href="/tags">47 <p>Tags</p></a></li>
                </ul>
            </div>
            
            
            
            <div class="box sticky animated fadeInRight faster">
                <div id="toc" class="subbox">
                    <h4>Contents</h4>
                    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#使用creat-react-app搭建基于webpack的react开发环境"><span class="toc-number">1.</span> <span class="toc-text">使用creat-react-app搭建基于webpack的react开发环境</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#环境配置介绍："><span class="toc-number">1.1.</span> <span class="toc-text">环境配置介绍：</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#项目结构："><span class="toc-number">1.1.1.</span> <span class="toc-text">项目结构：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#开发环境，代理请求"><span class="toc-number">1.1.2.</span> <span class="toc-text">开发环境，代理请求</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#SASS、LESS等CSS预处理器配置"><span class="toc-number">1.1.3.</span> <span class="toc-text">SASS、LESS等CSS预处理器配置</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#使用and-mobile-UI工具-可以快速开发react应用"><span class="toc-number">1.2.</span> <span class="toc-text">使用and-mobile UI工具 可以快速开发react应用</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#antd-mobile的引入及配置"><span class="toc-number">1.2.1.</span> <span class="toc-text">antd-mobile的引入及配置</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#基于create-react-app的打包后文件根路径修改"><span class="toc-number">1.3.</span> <span class="toc-text">基于create-react-app的打包后文件根路径修改</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#react段位排行要求知乎大神总结"><span class="toc-number">1.4.</span> <span class="toc-text">react段位排行要求知乎大神总结</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#倔强青铜"><span class="toc-number">1.4.1.</span> <span class="toc-text">倔强青铜</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#秩序白银"><span class="toc-number">1.4.2.</span> <span class="toc-text">秩序白银</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#荣耀黄金"><span class="toc-number">1.4.3.</span> <span class="toc-text">荣耀黄金</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#尊贵铂金"><span class="toc-number">1.4.4.</span> <span class="toc-text">尊贵铂金</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#永恒钻石"><span class="toc-number">1.4.5.</span> <span class="toc-text">永恒钻石</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#至尊星耀"><span class="toc-number">1.4.6.</span> <span class="toc-text">至尊星耀</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#最强王者"><span class="toc-number">1.4.7.</span> <span class="toc-text">最强王者</span></a></li></ol></li></ol></li></ol>
                </div>
            </div>
            
            
        </div>
    </div>
</div>

    </div>
</div>
    <div id="back-to-top" class="animated fadeIn faster">
        <div class="flow"></div>
        <span class="percentage animated fadeIn faster">0%</span>
        <span class="iconfont icon-top02 animated fadeIn faster"></span>
    </div>
</body>
<footer>
    <p class="copyright" id="copyright">
        &copy; 2020
        <span class="gradient-text">
            张白告丶
        </span>.
        Powered by <a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a>
        Theme
        <span class="gradient-text">
            <a href="https://github.com/TriDiamond/hexo-theme-obsidian" title="Obsidian" target="_blank" rel="noopener">Obsidian</a>
        </span>
        <small><a href="https://github.com/TriDiamond/hexo-theme-obsidian/blob/master/CHANGELOG.md" title="v1.4.3" target="_blank" rel="noopener">v1.4.3</a></small>
    </p>
</footer>

<script type="text/javascript" src="https://cdn.bootcss.com/mathjax/2.7.6/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script>
  MathJax.Hub.Config({
    "HTML-CSS": {
      preferredFont: "TeX",
      availableFonts: ["STIX", "TeX"],
      linebreaks: {
        automatic: true
      },
      EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50)
    },
    tex2jax: {
      inlineMath: [
        ["$", "$"],
        ["\\(", "\\)"]
      ],
      processEscapes: true,
      ignoreClass: "tex2jax_ignore|dno",
      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    },
    TeX: {
      noUndefined: {
        attributes: {
          mathcolor: "red",
          mathbackground: "#FFEEEE",
          mathsize: "90%"
        }
      },
      Macros: {
        href: "{}"
      }
    },
    messageStyle: "none"
  });
</script>
<script>
  function initialMathJax() {
    MathJax.Hub.Queue(function () {
      var all = MathJax.Hub.getAllJax(),
        i;
      // console.log(all);
      for (i = 0; i < all.length; i += 1) {
        console.log(all[i].SourceElement().parentNode)
        all[i].SourceElement().parentNode.className += ' has-jax';
      }
    });
  }

  function reprocessMathJax() {
    if (typeof MathJax !== 'undefined') {
      MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
    }
  }
</script>



    
<link rel="stylesheet" href="//cdn.bootcss.com/gitalk/1.5.0/gitalk.min.css">

    
<script src="//cdn.bootcss.com/gitalk/1.5.0/gitalk.min.js"></script>



<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="/js/plugin.js"></script>
<script src="/js/obsidian.js"></script>
<script src="/js/jquery.truncate.js"></script>
<script src="/js/search.js"></script>


<script src="//cdn.bootcss.com/typed.js/2.0.10/typed.min.js"></script>


<script src="//cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>


<script src="//cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js"></script>


<script src="https://cdn.bootcss.com/codemirror/5.48.4/codemirror.min.js"></script>

    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/javascript/javascript.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/css/css.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/xml/xml.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/htmlmixed/htmlmixed.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/clike/clike.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/php/php.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/shell/shell.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/python/python.min.js"></script>




    
<script src="/js/busuanzi.min.js"></script>

    <script>
        $(document).ready(function () {
            if ($('span[id^="busuanzi_"]').length) {
                initialBusuanzi();
            }
        });
    </script>



<link rel="stylesheet" href="//cdn.bootcss.com/photoswipe/4.1.3/photoswipe.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/photoswipe/4.1.3/default-skin/default-skin.min.css">


<script src="//cdn.bootcss.com/photoswipe/4.1.3/photoswipe.min.js"></script>
<script src="//cdn.bootcss.com/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>


<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>



    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="//www.googletagmanager.com/gtag/js?id=UA-149874671-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-149874671-1');
    </script>





<script>
    function initialTyped () {
        var typedTextEl = $('.typed-text');
        if (typedTextEl && typedTextEl.length > 0) {
            var typed = new Typed('.typed-text', {
                strings: ["Think like an artist, develop like an artisan", "艺术家思维去思考问题，工匠创造精神去开发"],
                typeSpeed: 90,
                loop: true,
                loopCount: Infinity,
                backSpeed: 20,
            });
        }
    }

    if ($('.article-header') && $('.article-header').length) {
        $(document).ready(function () {
            initialTyped();
        });
    }
</script>




</html>
